<template>
  <m-drawer :footer="false" width="60%" ref="drawerRef" title="成员管理">
      <m-table :beforeFetch="handleBeforeFetch" ref="tableRef" :api="userListByRoleId" :columns="columns" :actions="tableActions">
        <template #tableToolbarLeft>
          <a-button type="primary" @click="handleOpenSelectUserRole">
            <template #icon><PlusOutlined /></template>
            添加成员
          </a-button>
        </template>
      </m-table>
      <SelectUserRole ref="selectUserRoleRef" />
  </m-drawer>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { userListByRoleId, removeUserRole } from '/@/api/sys/role'
import { PlusOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import SelectUserRole from './selectUserRole.vue';
const drawerRef = ref();
const currentRecord = ref()
const tableRef = ref();
const selectUserRoleRef = ref();
const columns = ref([{
    title: '用户名',
    dataIndex: 'userName',
    key: 'userName',
  }, {
    title: '姓名',
    dataIndex: 'realName',
    key: 'realName',
}, {
    title: '手机号',
    dataIndex: 'mobilePhone',
    key: 'mobilePhone',
}])
const tableActions = ref([{
    label: '删除成员',
    icon: 'DeleteOutlined',
    divider: true,
    perms: 'sys:rbac:removeUserRole',
    orderNo: 90,
    popConfirm: {
    title: '是否删除该条记录?',
    confirm(e: any, row: any) {
      removeUserRole([{
        userId: row.record.id,
        roleId: currentRecord.value.id
      }]).then(()=>{
      message.success(`删除成功`)
      // 刷新列表
      tableRef?.value.reload()
    })
    },
    cancel() {
      message.info(`取消删除`)
    }
  }
  },])
const handleBeforeFetch = (params: any)=>{
  return {
    ...params,
    roleId: currentRecord.value?.id
  }
}
const handleOpenSelectUserRole = () =>{
  selectUserRoleRef.value?.show(currentRecord.value)
}
defineExpose({
  show(record: any) {
    currentRecord.value = record
    drawerRef.value.openDrawer()
  }
})
</script>
<style lang="less" scoped>

</style>